<template>
  <div class="my-shop-container">
    <h1>购物车列表</h1>

    <ul class="shop-header">
      <li>商品名称</li>
      <li>商品价格</li>
      <li>商品数量</li>
      <li>删除</li>
    </ul>

    <ul class="shop-list">
      <li v-for="(item, index) in $store.state.shopCarList" :key="index">
        <span>{{ item.goodsName }}</span>
        <span>{{ item.goodsPrice }}</span>
        <span>
          <button @click="deleteCount(item)">-</button>
          {{ item.count }}
          <button @click="addCount(item)">+</button></span
        >
        <button size="mini" @click="deleteGoods">删除</button>
      </li>
    </ul>

    <h3>商品总价是{{ total }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //增加数量
    addCount(item) {
      this.$store.commit("addCount", item.id);
    },
    //减少数量
    deleteCount(item) {
      this.$store.commit("deleteCount", item.id);
    },
    //删除商品
    deleteGoods(item){
    this.$store.commit("deleteGoods",item.id)
    }
  },
  computed: {
    total() {
      return this.$store.state.shopCarList.reduce((prev, next) => {
        return prev + next.count * Number(next.goodsPrice);
      }, 0);
    },
  },
};
</script>


<style lang="scss" scoped>
.my-shop-container {
  flex: 1;
  height: 100%;
  border-right: 2px solid #e4393c;
  .shop-header {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;

    li {
      flex: 1;
      text-align: center;
      line-height: 30px;
      border: 1px solid #ddd;
      box-sizing: border-box;
    }
  }

  .shop-list {
    li {
      display: flex;
      justify-content: space-between;

      span {
        flex: 1;
        text-align: center;
        line-height: 25px;
      }

      .el-button {
        flex: 1;
      }
    }
  }
}


h1 {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
</style>